<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>轮播图</title>
	<style type="text/css">
	*{margin:0px;padding:0px;list-style:none;}
	#all{width:500px;height:400px;position:relative;overflow:hidden;left:20px;top:30px;}

	#uls{width:2500px;height:400px;border:solid 1px blue;position:absolute;}
	#uls li{width:500px;height:400px;float:left;}

	#lis{width:200px;height:30px;position:absolute;right:10px;top:360px;}
	#lis li{width:30px;height:30px;border:solid 1px orange;float:left;border-radius:50%;margin-right:5px;background:#ccc;}

	#lis .cur{background:black}

	</style>
</head>
<body>
	<div id='all'>
	<ul id='uls'>
		<li><img src="./lunbo/30.jpg" alt="" width='100%'></li>
		<li><img src="./lunbo/31.jpg" alt="" width='100%'></li>
		<li><img src="./lunbo/32.jpg" alt="" width='100%'></li>
		<li><img src="./lunbo/33.jpg" alt="" width='100%'></li>
		<li><img src="./lunbo/34.jpg" alt="" width='100%'></li>
	</ul>

	<ul id='lis'>
		<li></li>
		<li></li>
		<li></li>
		<li></li>
		<li></li>
	</ul>
	</div>

	<script type="text/javascript" src='jquery-1.8.3.min.js'></script>
	<script type="text/javascript">
	
	var index = 1;

	var into = null;

	function func(){
		//定时器
		into = setInterval(function(){
			//获取下标做++操作
			move(index++);

			if(index > 4)
			{
				index = 0;
			}

		},3000)

	}

	func()

	function move(i)
	{
		// $('#uls li').eq(i).show();
		// $('#uls li').eq(i).siblings().hide();

		//
		var res = i*(-500);
		$('#uls').animate({

			left: res+'px',
		},2000)


		$('#lis li').eq(i).addClass('cur');
		$('#lis li').eq(i).siblings().removeClass('cur');
	}

	move(0);


	/*//鼠标移上去的事件
	$('#lis li').mouseover(function(){

		alert(123);
	})
	//鼠标离开的事件
	$('#lis li').mouseout(function(){

		alert(6789);
	})*/

	//
	$('#lis li').hover(function(){
		//获取下标 eq(0)

		index = $(this).index();

		//alert(res);

		move(index++);

		//清除定时器
		clearInterval(into);
		
	},function(){

		func();

		if(index >4){

			index = 0;
		}


	})
	</script>
</body>
</html>